{% extends 'base.html' %} {% block css%}
<style type="text/css"></style>
{% endblock %} {% block body%}
    <div class="row">

    <div class="col-md-7">
            <h3>Host Side PRBS</h3>
            <table class="table table-hover table-responsive table-condensed">
                <tr>
                    <td width="25%">Generator Config</td>
                    <td>
                        <select class="form-control" style="width:150px; height:30px" id="btn_host_gen_type">
                            <option value="0">PRBS-31Q</option>
                            <option value="1">PRBS-31</option>
                            <option value="2">PRBS-23Q</option>
                            <option value="3">PRBS-23</option>
                            <option value="4">PRBS-15Q</option>
                            <option value="5">PRBS-15</option>
                            <option value="6">PRBS-13Q</option>
                            <option value="7">PRBS-13</option>
                            <option value="8">PRBS-9Q</option>
                            <option value="9">PRBS-9</option>
                            <option value="10">PRBS-7Q</option>
                            <option value="11">PRBS-7</option>                            
                        </select>
                    </td>

                    <td> 
                        <button style="width: 100px;" id="btn_host_gen_en" class="btn btn-success"> Enable</button>
                    &nbsp;&nbsp;
                        <button style="width: 100px;" id="btn_host_gen_dis" class="btn btn-warning"> Disable</button>
                    </td>
                </tr>
                <tr>
                    <td>Checker Config</td>
                    <td>
                        <select class="form-control" style="width:150px; height:30px" id="btn_host_chk_type">
                            <option value="0">PRBS-31Q</option>
                            <option value="1">PRBS-31</option>
                            <option value="2">PRBS-23Q</option>
                            <option value="3">PRBS-23</option>
                            <option value="4">PRBS-15Q</option>
                            <option value="5">PRBS-15</option>
                            <option value="6">PRBS-13Q</option>
                            <option value="7">PRBS-13</option>
                            <option value="8">PRBS-9Q</option>
                            <option value="9">PRBS-9</option>
                            <option value="10">PRBS-7Q</option>
                            <option value="11">PRBS-7</option>                            
                        </select>
                    </td>                    
                    <td> 
                        <button style="width: 100px;" id="btn_host_chk_en" class="btn btn-success"> Enable</button>
                    &nbsp;&nbsp;
                        <button style="width: 100px;" id="btn_host_chk_dis" class="btn btn-warning"> Disable</button>
                    </td>
                </tr>

                <tr>
                    <td>&nbsp;</td>
                    <td></td>
                    <td></td>
                </tr>
            </table>

            <table class="table table-hover table-responsive">

                <tr>
                    <td></td>
                    <td>ERROR COUNT</td>
                    <td>BIT COUNT</td>
                    <td>BER</td>
                </tr>

                <tr>
                    <td id="l1_1">Host Lane 1</td>
                    <td id="l1_2"> - </td>
                    <td id="l1_3"> - </td>
                    <td id="l1_4"> - </td>
                </tr>
                <tr>
                    <td id="l2_1">Host Lane 2</td>
                    <td id="l2_2"> - </td>
                    <td id="l2_3"> - </td>
                    <td id="l2_4"> - </td>
                </tr>
             
                <tr>
                    <td id="l3_1">Host Lane 3</td>
                    <td id="l3_2"> - </td>
                    <td id="l3_3"> - </td>
                    <td id="l3_4"> - </td>
                </tr>

                <tr>
                    <td id="l4_1">Host Lane 4</td>
                    <td id="l4_2"> - </td>
                    <td id="l4_3"> - </td>
                    <td id="l4_4"> - </td>
                </tr>

                <tr>
                    <td id="l5_1">Host Lane 5</td>
                    <td id="l5_2"> - </td>
                    <td id="l5_3"> - </td>
                    <td id="l5_4"> - </td>
                </tr>

                <tr>
                    <td id="l6_1">Host Lane 6</td>
                    <td id="l6_2"> - </td>
                    <td id="l6_3"> - </td>
                    <td id="l6_4"> - </td>
                </tr>

                <tr>
                    <td id="l7_1">Host Lane 7</td>
                    <td id="l7_2"> - </td>
                    <td id="l7_3"> - </td>
                    <td id="l7_4"> - </td>
                </tr>   

                <tr>
                    <td id="l8_1">Host Lane 8</td>
                    <td id="l8_2"> - </td>
                    <td id="l8_3"> - </td>
                    <td id="l8_4"> - </td>
                </tr>
                <tr>
                    <td colspan="5">
                        <button id="btn_host_side_prbs" class="btn btn-success">
                        Get
                         <i id="btn_host_side_prbs_loading" class="fa fa-refresh fa-spin fa-fw"></i>
                        </button>
                    </td>
                </tr>
            </table>
        </div>


        <div class="col-md-5">
            <h3>Media Side PRBS</h3>
            <table class="table table-hover table-responsive table-condensed">
                <tr>
                    <td width="25%">Generator Config</td>

                    <td>
                        <select class="form-control" style="width:150px; height:30px" id="btn_line_gen_type">
                            <option value="0">PRBS-31Q</option>
                            <option value="1">PRBS-31</option>
                            <option value="2">PRBS-23Q</option>
                            <option value="3">PRBS-23</option>
                            <option value="4">PRBS-15Q</option>
                            <option value="5">PRBS-15</option>
                            <option value="6">PRBS-13Q</option>
                            <option value="7">PRBS-13</option>
                            <option value="8">PRBS-9Q</option>
                            <option value="9">PRBS-9</option>
                            <option value="10">PRBS-7Q</option>
                            <option value="11">PRBS-7</option>                            
                        </select>
                    </td>                    
                    <td> 
                        <button style="width: 100px;" id="btn_line_gen_en" class="btn btn-success"> Enable</button>
                    &nbsp;&nbsp;
                        <button style="width: 100px;" id="btn_line_gen_dis" class="btn btn-warning"> Disable</button>
                    </td>
                </tr>
                <tr>
                    <td>Checker Config</td>
                    <td>
                        <select class="form-control" style="width:150px; height:30px" id="btn_line_chk_type">
                            <option value="0">PRBS-31Q</option>
                            <option value="1">PRBS-31</option>
                            <option value="2">PRBS-23Q</option>
                            <option value="3">PRBS-23</option>
                            <option value="4">PRBS-15Q</option>
                            <option value="5">PRBS-15</option>
                            <option value="6">PRBS-13Q</option>
                            <option value="7">PRBS-13</option>
                            <option value="8">PRBS-9Q</option>
                            <option value="9">PRBS-9</option>
                            <option value="10">PRBS-7Q</option>
                            <option value="11">PRBS-7</option>                            
                        </select>
                    </td>                    
                    <td> 
                        <button style="width: 100px;" id="btn_line_chk_en" class="btn btn-success"> Enable</button>
                    &nbsp;&nbsp;
                        <button style="width: 100px;" id="btn_line_chk_dis" class="btn btn-warning"> Disable</button>
                    </td>
                </tr>

                <tr>
                    <td>&nbsp;</td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
  
            <table class="table table-hover table-responsive">

                <tr>
                    <td>ERROR COUNT</td>
                    <td>BIT COUNT</td>
                    <td>BER</td>
                </tr>

                <tr>
                    <!-- <td id="m1_1">-</td> -->
                    <td id="m1_2">-</td>
                    <td id="m1_3">-</td>
                    <td id="m1_4">-</td>
                </tr>


                <tr>
                    <td colspan="4">
                        <button id="btn_line_side_prbs" class="btn btn-success">
                            Get
                            <i id="btn_line_side_prbs_loading" class="fa fa-refresh fa-spin fa-fw"></i>
                        </button>
                    </td>
                </tr>
            </table>


            <button id="data_clear" class="btn btn-lg btn-primary">
                Data Clear
            </button>
            &nbsp;&nbsp;&nbsp;&nbsp;

            <button id="auto_refresh" class="btn btn-lg btn-success">
                Auto Refresh (3s)
            </button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <button id="stop_auto_refresh" class="btn btn-lg btn-danger">
                Stop Refresh
            </button>
            <br><br>
            <span id="auto_refresh_info" style="color: blue;"></span>

        </div>

    
    </div>
{% endblock %} {% block js%}
{{ super() }}
<script type="text/javascript">
var t;


function get_prbs_config_state()
{
    url = "/api/get_prbs_config_state";
    $.get(url, function(data, status) {
        var obj=JSON.parse(data);
        console.log(obj);

        $('#btn_host_gen_type').val( obj['btn_host_gen_type'] ).prop('selected',true);
        $('#btn_host_chk_type').val( obj['btn_host_chk_type'] ).prop('selected',true);
        $('#btn_line_gen_type').val( obj['btn_line_gen_type'] ).prop('selected',true);
        $('#btn_line_chk_type').val( obj['btn_line_chk_type'] ).prop('selected',true);

        if(obj['btn_host_chk'] == 1) 
        {
            $("#btn_host_chk_en").html("Enable &nbsp;&nbsp;<i class='glyphicon glyphicon-ok'></i>");
            $("#btn_host_chk_dis").html("Disable");
        }
        else
        {
            $("#btn_host_chk_en").html("Enable");
            $("#btn_host_chk_dis").html("Disable &nbsp;&nbsp;<i class='glyphicon glyphicon-ok'></i>");
        }

        if(obj['btn_host_gen'] == 1) 
        {
            $("#btn_host_gen_en").html("Enable &nbsp;&nbsp;<i class='glyphicon glyphicon-ok'></i>");
            $("#btn_host_gen_dis").html("Disable");
        }
        else
        {
            $("#btn_host_gen_en").html("Enable");
            $("#btn_host_gen_dis").html("Disable &nbsp;&nbsp;<i class='glyphicon glyphicon-ok'></i>");
        }


        if(obj['btn_line_chk'] == 1) 
        {
            $("#btn_line_chk_en").html("Enable &nbsp;&nbsp;<i class='glyphicon glyphicon-ok'></i>");
            $("#btn_line_chk_dis").html("Disable");
        }
        else
        {
            $("#btn_line_chk_en").html("Enable");
            $("#btn_line_chk_dis").html("Disable &nbsp;&nbsp;<i class='glyphicon glyphicon-ok'></i>");
        }

        if(obj['btn_line_gen'] == 1) 
        {
            $("#btn_line_gen_en").html("Enable &nbsp;&nbsp;<i class='glyphicon glyphicon-ok'></i>");
            $("#btn_line_gen_dis").html("Disable");
        }
        else
        {
            $("#btn_line_gen_en").html("Enable");
            $("#btn_line_gen_dis").html("Disable &nbsp;&nbsp;<i class='glyphicon glyphicon-ok'></i>");
        }


    });
}


function auto_refresh()
{
    // line_side_prbs ////////////////////////////////
    $("#auto_refresh_info").html("Updating data ...");
    $.post(
        "api/btn_line_side_prbs1", {
        },
        function(data, status) {
            var obj=JSON.parse(data)
            console.log(obj);
            for(i=0; i<obj.length ; i++)
            {
                $("#m" + (i+1) + "_1").html(obj[i][0]);
                $("#m" + (i+1) + "_2").html(obj[i][1]);
                $("#m" + (i+1) + "_3").html(obj[i][2]);
                $("#m" + (i+1) + "_4").html(obj[i][3]);
            }

            // line_side_prbs ////////////////////////////////
            $.post(
                "api/btn_host_side_prbs1", {
                },
                function(data, status) {
                    var obj=JSON.parse(data)
                    console.log(obj);
                    for(i=0; i<obj.length ; i++)
                    {
                        $("#l" + (i+1) + "_1").html(obj[i][0]);
                        $("#l" + (i+1) + "_2").html(obj[i][1]);
                        $("#l" + (i+1) + "_3").html(obj[i][2]);
                        $("#l" + (i+1) + "_4").html(obj[i][3]);
                    }

                    $("#auto_refresh_info").html("All data is up to date.");
                }
            );



        }
    );

     t = setTimeout(auto_refresh, 3000);
}


$(document).ready(function() {
    get_prbs_config_state();

    toastr.options = {
        "closeButton": true,
        "positionClass": "toast-top-center"
    }

    $("#btn_line_side_prbs_loading").hide();
    $("#btn_host_side_prbs_loading").hide();


    // prbs2.html page begin
    $("#btn_host_gen_en").click(function() {
        $.post(
            "api/btn_host_gen_en", {
                'btn_host_gen_type':$('#btn_host_gen_type').val(),
            },
            function(data, status) {
                toastr["success"]("Command successfully issued.");
                console.log("data: " + data);
                get_prbs_config_state();
            }
        );
    });

    $("#btn_host_gen_dis").click(function() {
        $.post(
            "api/btn_host_gen_dis", {
                'btn_host_gen_type':$('#btn_host_gen_type').val(),
            },
            function(data, status) {
                toastr["success"]("Command successfully issued.");
                console.log("data: " + data);
                get_prbs_config_state();
            }
        );
    });


    $("#btn_host_chk_en").click(function() {
        $.post(
            "api/btn_host_chk_en", {
                'btn_host_chk_type':$('#btn_host_chk_type').val(),
            },
            function(data, status) {
                toastr["success"]("Command successfully issued.");
                console.log("data: " + data);
                get_prbs_config_state();
            }
        );
    });

    $("#btn_host_chk_dis").click(function() {
        $.post(
            "api/btn_host_chk_dis", {
                'btn_host_chk_type':$('#btn_host_chk_type').val(),
            },
            function(data, status) {
                toastr["success"]("Command successfully issued.");
                console.log("data: " + data);
                get_prbs_config_state();
            }
        );
    });


    $("#btn_line_gen_en").click(function() {
        $.post(
            "api/btn_line_gen_en", {
                'btn_line_gen_type':$('#btn_line_gen_type').val(),
            },
            function(data, status) {
                toastr["success"]("Command successfully issued.");
                console.log("data: " + data);
                get_prbs_config_state();
            }
        );
    });

    $("#btn_line_gen_dis").click(function() {
        $.post(
            "api/btn_line_gen_dis", {
                'btn_line_gen_type':$('#btn_line_gen_type').val(),
            },
            function(data, status) {
                toastr["success"]("Command successfully issued.");
                console.log("data: " + data);
                get_prbs_config_state();
            }
        );
    });


    $("#btn_line_chk_en").click(function() {
        $.post(
            "api/btn_line_chk_en", {
                'btn_line_chk_type':$('#btn_line_chk_type').val(),
            },
            function(data, status) {
                toastr["success"]("Command successfully issued.");
                console.log("data: " + data);
                get_prbs_config_state();
            }
        );
    });

    $("#btn_line_chk_dis").click(function() {
        $.post(
            "api/btn_line_chk_dis", {
                'btn_line_chk_type':$('#btn_line_chk_type').val(),
            },
            function(data, status) {
                toastr["success"]("Command successfully issued.");
                console.log("data: " + data);
                get_prbs_config_state();
            }
        );
    });
    // prbs2.html page end


    $("#btn_line_side_prbs").click(function() {
        $("#btn_line_side_prbs_loading").show();
        $.post(
            "api/btn_line_side_prbs1", {
            },
            function(data, status) {
                var obj=JSON.parse(data)
                console.log(obj);

                for(i=0; i<obj.length ; i++)
                {
                    $("#m" + (i+1) + "_1").html(obj[i][0]);
                    $("#m" + (i+1) + "_2").html(obj[i][1]);
                    $("#m" + (i+1) + "_3").html(obj[i][2]);
                    $("#m" + (i+1) + "_4").html(obj[i][3]);
                }

                $("#btn_line_side_prbs_loading").hide();
            }
        );
    });

    $("#btn_host_side_prbs").click(function() {
        $("#btn_host_side_prbs_loading").show();
        $.post(
            "api/btn_host_side_prbs1", {
            },
            function(data, status) {
                var obj=JSON.parse(data)
                console.log(obj);

                for(i=0; i<obj.length ; i++)
                {
                    $("#l" + (i+1) + "_1").html(obj[i][0]);
                    $("#l" + (i+1) + "_2").html(obj[i][1]);
                    $("#l" + (i+1) + "_3").html(obj[i][2]);
                    $("#l" + (i+1) + "_4").html(obj[i][3]);
                }

                $("#btn_host_side_prbs_loading").hide();
            }
        );
    });


    $("#data_clear").click(function() {
        $("#auto_refresh_info").html("Data clear ...");
        $.post(
            "api/data_clear", {
            },
            function(data, status) {
                // console.log(data);
                $("#auto_refresh_info").html("Data clear, ok.");
            }
        );
    });


    $("#auto_refresh").click(function() {
       auto_refresh();
    });

    $("#stop_auto_refresh").click(function() {
       clearTimeout(t);
        $("#auto_refresh_info").html("Auto refresh is disabled.");
    });


});
</script>
{% endblock %}